<template>
  <div
      class="menu-button"
      style="background: linear-gradient(97deg, #0098a9 0%, #0ab6ca 100%)">
      <div class="label">
          <slot></slot>
      </div>
      <!-- <div
          style="
              background-image: url('/img/main/3dcube2.png');
              height: 100%;
              width: 100%;
              z-index: 10;
              position: absolute;
              background-size: 20%;
              background-repeat: no-repeat;
              background-position: center 0px;
              margin-top: 60px;
          "></div> -->
      <div
          style="
              background-image: url('/img/main/three-dimensional.png');
              height: 100%;
              width: 100%;
              z-index: 10;
              position: absolute;
              background-size: cover;
              background-repeat: no-repeat;
              background-position: center center;
              /* margin-top: 60px; */
          "></div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
@use 'src/assets/scss/main.scss' as *;
.menu-button {
  height: 200px;
  // background-color: rgba(0, 128, 0, 1);
  border-radius: 6px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;

  @include animate_trans();
  &:hover {
      //opacity: 0.7;
      // box-shadow: 10px;
      // @mixin base-box-shadow-10 {
      //     box-shadow: rgb(255, 255, 255) 0 0 10px;
      // }
      @include base-box-shadow-10;
  }

  &:active {
      //transform: translate(2px,2px);
      @include hover-move(2px);
  }

  .label {
      display: block;
      position: absolute;
      left: 30px;
      bottom: 16px;
      font-size: 22px;
      z-index: 15;
      // color: #000000;
      background-color: #0005;
      border-radius: 5px;
      // align-items: center;
  }
}
</style>
